<!-- 充值订单 -->
<template>
    <div>
        <div class="table-page-search-wrapper">
            <a-form layout="inline">
                <a-row :gutter="48">
                    <a-col :md="8" :sm="24">
                        <a-form-item label="用户ID">
                            <a-input v-model="userId" allow-clear placeholder="请输入用户ID" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="8" :sm="24">
                    </a-col>
                    <a-col :md="8" :sm="24">
                        <a-form-item >
                            <a-button type="primary" @click="getData()">查询</a-button>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </div>

        <a-table rowKey="id" :loading="isload" :columns="columns" :data-source="dataList" @change="handleTableChange" :pagination="{ pageSize: 10, total: total ,showSizeChanger: true,pageSize: size}" size="small" >
            <div slot="amount" slot-scope="amount,record">
                <span>{{amount}}{{record.accountType }}</span>
            </div>
            <div slot="imgUrl" slot-scope="imgUrl">
                <img style="width: 200px;height: 100px" @click="showImg(imgUrl)" :src="imgUrl" alt="">
            </div>
            <div slot="status" slot-scope="status">
                <div v-for="statu in orderStatusList" :key="statu.id">
                    <span :class="`status${status}`" v-if="statu.id == status">{{statu.name}}</span>
                </div>
            </div>
            <!-- <template slot="operation" slot-scope="text, record">
                <div class="editable-row-operations">
                    <a-popconfirm
                        v-if="record.evidenceStatus == 0 "
                        title="是否审核通过当前充值订单?"
                        ok-text="Yes"
                        cancel-text="No"
                        @confirm="operation(record,1)"
                    >
                        <a-button type="link">通过</a-button>
                    </a-popconfirm>
                    <a-button v-if="record.evidenceStatus == 0" type="link" @click="operation(record,2)">拒绝</a-button>
                </div>
            </template> -->
        </a-table>

        <!-- 拒绝审核理由 -->
        <a-modal v-model="visible" title="拒绝理由" ok-text="确认" cancel-text="取消" @ok="auditOrder(item,operationStatus)">
            <a-input v-model="remark" type="textarea" allow-clear placeholder="请输入拒绝理由" />
        </a-modal>

        <!-- 图片预览 -->
        <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
            <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
    </div>
</template>

<script>
import { columns } from './table';
import { queryJTKUnionOrder } from '@/api/order';
export default {
    data () {
        return {
            userId: '',
            brandId: this.global.brandId,
            orderCode: '', 
            orderStatus: undefined,
            orderStatusList: [
                { id: 0, name: '未付款' },
                { id: 1, name: '已付款' },
                { id: 2, name: '待结算' },
                { id: 3, name: '已结算' },
                { id: 4, name: '无效订单' },
            ],
            dataList: [],
            total: 0,
            isload: false,
            columns,
            page: 1,
            size: 10,
            item: {},
            operationStatus: '', // 审核状态
            remark: undefined,
            visible: false,
            previewVisible: false,
            previewImage: '',
        };
    },
    async created(){
        this.getData()
    },
    methods: {
        // 查询充值订单
        getData(){
            let _this = this
            const params = {
                'brandId':_this.brandId,
                'userId':_this.userId,
                'size':_this.size,
                'page':_this.page - 1,
            }
            queryJTKUnionOrder(params)
            .then(res=>{
                if(res.success){
                    _this.dataList = res.data.content
                    _this.total = res.data.totalElements
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        // 分页
        handleTableChange(pagination, filters, sorter) {
            console.log(pagination);
            this.page = pagination.current;
            this.size = pagination.pageSize;
            this.getData()
        },
        // 审核充值订单
        operation(item,status){
            if(status == 2){
                this.item = JSON.parse(JSON.stringify(item))
                this.operationStatus = status
                this.visible = true
            }else{
                this.remark = undefined
                this.auditOrder(item,status)
            }
        },
        // 确定审核订单
        auditOrder(item,status){
            let _this = this
            const params = {
                'topUpEvidenceId':item.id,
                'evidenceStatus':status,
                'remark':_this.remark,
            }
            checkTopUpEvidence(params)
            .then(res=>{
                if(res.success){
                    _this.$notification['success']({
                        message: '提示',
                        description: status == 3 ? '已拒绝' : '已通过',
                        duration: 8,
                    })
                    _this.visible = false
                    _this.getData()
                }else{
                    _this.$notification['error']({
                        message: '提示',
                        description: res.errMessage,
                        duration: 8,
                    })
                }
            })
        },
        showImg(url){
            this.previewImage = url;
            this.previewVisible = true;
        },
    }
}

</script>
<style scoped lang="less">
.status0{
    color: #faad14
}
.status2{
    color: #f5222d
}
.status3{
    color: #f5222d
}
.status1{
    color: #52c41a
}
</style>